import { disabledDate } from "@/utils/common";
import Https from "@/utils/Https";
import { PageContainer } from "@ant-design/pro-components";
import {
  Button,
  Card,
  DatePicker,
  Empty,
  message,
  Select,
  Spin,
  Tabs,
} from "antd";
import dayjs from "dayjs";
import { useEffect, useState } from "react";
import { connect, history } from "umi";
import { namespace } from "./configFile";
import styles from "./styles.less";
import DateReservation from "./Component/dateReservation"; //预约记录_日
import WeekReservation from "./Component/WeekReservation"; //预约记录_周
import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";
const Page = (props) => {
  const [cycle, setCycle] = useState("date");
  const [loading, setLoading] = useState(false);
  //场馆列表
  const [venueList, setVenueList] = useState([]);
  //场馆信息
  const [venueObj, setVenueObj] = useState({});
  //教室列表
  const [roomList, setRoomList] = useState([]);
  //场馆信息
  const [roomInfo, setRoomInfo] = useState({});
  const [defaultDate, setDefaultDate] = useState<any>("");
  const [defaultWeekValue, setDefaultWeekValue] = useState<any>("");
  const [defaultTime, setDefaultTime] = useState({});
  const [sortReload, setSortReload] = useState(false);
  const [activiteRoom, setActiviteRoom] = useState("");
  const [full, setFull] = useState(false);
  //获取所有场馆
  const getAllVenue = async () => {
    setLoading(true);
    let res: any = await Https.get("/venue/info/queryVenueTradeHour", {}, true);
    if (res.code == 200 && res.data) {
      setVenueObj(res.data);
      setVenueList([{ ...res.data }]);
      getAllClassRoom(res.data.id);
    } else {
      message.error(res.msg);
    }
    setLoading(false);
  };
  //获取所有教室列表
  const getAllClassRoom = async (id) => {
    setLoading(true);
    let res = await Https.get(
      "/course/sched/classRoomAllList?venueId=" + id,
      {},
      true
    );
    setLoading(false);
    if (res.code == 200) {
      let objList = [];
      if (res.data.length > 0) {
        res.data.map((item) =>
          objList.push({ ...item, label: item.classRoomName, key: item.id })
        );
        setRoomInfo(objList[0]);
        setActiviteRoom(objList[0].key);
      }
      setRoomList(objList);
    } else {
      setRoomList([]);
    }
  };
  useEffect(() => {
    getAllVenue();
    setDefaultDate(dayjs());
    setDefaultWeekValue(dayjs());
    setTimeout(() => {
      setDefaultTime({
        startTime: dayjs().startOf("week").format("YYYY-MM-DD"),
        endTime: dayjs().endOf("week").format("YYYY-MM-DD"),
      });
    }, 500);
  }, []);
  return (
    <div className={full ? styles.FullContainer : ""}>
      <Spin spinning={loading}>
        <PageContainer className={styles.courseGroup} title="团课预约记录">
          <Card
            title={cycle == "date" ? "团课预约列表" : "团课预约记录"}
            extra={
              <div>
                {/* <Select
                  placeholder="请选择场馆"
                  style={{ width: "200px" }}
                  value={venueObj.id}
                  onChange={(val) => {
                    let obj = venueList.filter(function (o) {
                      return o.id == val;
                    })[0];
                    setVenueObj(obj);
                    setRoomInfo({});
                    if (cycle == "week") {
                      getAllClassRoom(obj.id);
                    }
                  }}
                >
                  {venueList &&
                    venueList.map((item, index) => (
                      <Select.Option key={item.id} value={item.id}>
                        {item.venueName}
                      </Select.Option>
                    ))}
                </Select> */}
                {cycle == "date" ? (
                  <>
                    <DatePicker
                      onChange={(date, dateString) => {
                        setDefaultDate(date);
                      }}
                      allowClear={false}
                      value={defaultDate}
                      style={{ marginLeft: "20px", width: "200px" }}
                    />
                    <a
                      style={{ marginLeft: "20px" }}
                      onClick={() => {
                        setCycle("week");
                        // setRoomList([]);
                        // setRoomInfo({});
                        // setVenueObj({});
                        setDefaultWeekValue(dayjs());
                        setDefaultTime({
                          startTime: dayjs()
                            .startOf("week")
                            .format("YYYY-MM-DD"),
                          endTime: dayjs().endOf("week").format("YYYY-MM-DD"),
                        });
                      }}
                    >
                      周课表
                    </a>
                  </>
                ) : (
                  <>
                    <DatePicker
                      style={{ marginLeft: "20px", width: "200px" }}
                      format={`YYYY-MM-DD 第wo`}
                      allowClear={false}
                      picker="week"
                      value={defaultWeekValue}
                      renderExtraFooter={() => {
                        return (
                          <div style={{ width: "100%", textAlign: "center" }}>
                            <a
                              onClick={() => {
                                setDefaultWeekValue(dayjs());
                                setDefaultTime({
                                  startTime: dayjs()
                                    .startOf("week")
                                    .format("YYYY-MM-DD"),
                                  endTime: dayjs()
                                    .endOf("week")
                                    .format("YYYY-MM-DD"),
                                });
                              }}
                            >
                              回到今天
                            </a>
                          </div>
                        );
                      }}
                      onChange={(date, dateString: string) => {
                        setDefaultWeekValue(date);
                        let currentDate = dateString.split(" ")[0];
                        let startTime = dayjs(currentDate)
                          .startOf("week")
                          .format("YYYY-MM-DD");
                        let endTime = dayjs(currentDate)
                          .endOf("week")
                          .format("YYYY-MM-DD");
                        setDefaultTime({ startTime, endTime });
                      }}
                    />
                    <a
                      style={{ marginLeft: "20px" }}
                      onClick={() => {
                        setCycle("date");
                        setDefaultDate(dayjs());
                        // setVenueObj({});
                      }}
                    >
                      日课表
                    </a>
                  </>
                )}
              </div>
            }
          >
            {cycle == "date" ? (
              <DateReservation venueObj={venueObj} defaultDate={defaultDate} />
            ) : (
              <div>
                {venueList.length > 0 && !venueObj.id && (
                  <Empty
                    image={Empty.PRESENTED_IMAGE_SIMPLE}
                    description={
                      <div>
                        暂无数据 <br /> 请先选择场馆
                      </div>
                    }
                  />
                )}
                {venueList.length > 0 &&
                  venueObj.id &&
                  roomList.length == 0 && (
                    <Empty
                      image={Empty.PRESENTED_IMAGE_SIMPLE}
                      description={
                        <div>
                          暂未创建教室 <br />
                          <Button
                            style={{ marginTop: "10px" }}
                            type="primary"
                            onClick={() => {
                              history.push("/stadium/classroom");
                            }}
                          >
                            去创建教室
                          </Button>
                        </div>
                      }
                    />
                  )}
                {venueList.length > 0 && venueObj.id && roomList.length > 0 && (
                  <div id="FullBox" className={full ? styles.tabFixed : ""}>
                    <div className={styles.tabFlex}>
                      <Tabs
                        onChange={(val) => {
                          let obj = roomList.filter(function (o) {
                            return o.id == val;
                          })[0];
                          setActiviteRoom(val);
                          setRoomInfo(obj);
                        }}
                        type="card"
                        activeKey={activiteRoom}
                        items={roomList}
                      />
                      <div className={styles.FullIcon}>
                        {full ? (
                          <FullscreenExitOutlined
                            title="取消全屏"
                            onClick={() => {
                              setFull(!full);
                            }}
                          />
                        ) : (
                          <FullscreenOutlined
                            title="全屏"
                            onClick={() => {
                              setFull(!full);
                            }}
                          />
                        )}
                      </div>
                    </div>
                    <WeekReservation
                      venueObj={venueObj}
                      hasFull={full}
                      roomInfo={roomInfo}
                      defaultTime={defaultTime}
                      sortReload={sortReload}
                      defaultWeekValue={defaultWeekValue}
                      onReload={() => {
                        setSortReload(!sortReload);
                      }}
                    />
                  </div>
                )}
              </div>
            )}
          </Card>
        </PageContainer>
      </Spin>
    </div>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
